import {View, Text, StyleSheet} from 'react-native'
import React, {Component} from 'react'
import ScrollableTabView from 'react-native-scrollable-tab-view';
import OrderList from "../../component/page/mine/orders/orderList";
import PageCategoryBar from "../../component/widget/PageCategoryBar";
import {orderTabs} from "./ordersConfig";
import {Actions} from "react-native-router-flux";
import {alertProxy} from "../../component/common/AlertProxy";

interface OrdersProps {

}

interface OrdersState {
    status: number,
    currentTab: any
}

interface ActionProps {
    params: {
        status: number
    }
}

/***
 * 每个子tab初始化时不会刷新数据
 * 只有当切换到某个tab
 * 或者该tab是指定入口进来的tab才会刷新数据
 */

export default class Orders extends Component<OrdersProps, OrdersState> {
    orderListRefs: OrderList[] = [];

    state = {
        //不同订单状态
        status: null,
        //当前选中的tab
        currentTab: null,
    };


    /***
     * 当打开页面时调用
     * 设置需要显示的订单的状态，默认为0 显示主页
     * 初始化第一个展示的tab并设置"当前tab" 后刷新
     * @param props
     */
    onEnter(props: ActionProps) {
        this.setState({
            status: props.params.status || 0
        }, () => {
            const currentTab: OrderList = this.orderListRefs[props.params.status];
            this.setState({
                currentTab
            }, () => {
                this.refresh();
            });

        })
    }


    /***
     * tab切换时调用
     * 设置切换到的tab为"当前tab"
     * 并刷新"当前tab"
     * @param obj
     */
    onChangeTab = (obj) => {
        const orderList: OrderList = this.orderListRefs[obj.i];
        this.setState({
            currentTab: orderList
        }, () => {
            this.refresh();
        });

    };

    /***
     * 刷新"当前tab"的数据
     */
    refresh() {
        this.state.currentTab.refresh();
    }

    constructor(props: OrdersProps) {
        super(props);
    }

    /***
     * 如果有更改了当前页面的props 例如使用Actions.refresh(someProps)
     * 则刷新"当前tab"的数据
     * @param nextProps
     */
    componentWillReceiveProps(nextProps) {
        if (nextProps !== this.props) {
            this.refresh()
        }
    }


    render() {
        if (this.state.status == null) return null;
        return (
            <View style={style.container}>
                <ScrollableTabView
                    onChangeTab={this.onChangeTab}
                    locked={true}
                    initialPage={this.state.status}
                    style={{flex: 1}}
                    prerenderingSiblingsNumber={Infinity}
                    renderTabBar={() => (<PageCategoryBar separatorMargin={12} activeTextColor={"#15823B"}
                                                          inactiveTextColor={"#333333"}
                                                          style={{height: 44, backgroundColor: "#fff"}}
                                                          itemWidth={0} textStyle={{fontSize: 12}}
                                                          underlineStyle={{backgroundColor: "#15823B", height: 2}}/>)}>
                    {orderTabs.map((data, index) => {
                        return <OrderList index={index} tabLabel={data.name}
                                          ref={ol => this.orderListRefs.push(ol)}
                                          key={data.name} status={data.status}/>
                    })}
                </ScrollableTabView>
            </View>
        )
    }
}

const style = StyleSheet.create({
    container: {flex: 1}
});

 